{% include 'include/header.twig.html' %}
<link rel="stylesheet" href="/assets/css/bootstrap-datetimepicker.css"/>
<script type="text/javascript" src="/assets/js/eModal.min.js"></script>
<script type="text/javascript" src="/assets/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="/assets/tools/js/twodimensioncode.js"></script>
<style type="text/css">
    #ui-datepicker-div {
        font-size: 11px;
    }
    .ui-menu-item {
    }
    .ui-autocomplete {
        font-size: 11px;
    }
</style>
<div class="page-title">
    <div class="title_left" style="width: 300px">
        <h3 style="font-size: 2em;">二维码生成器</h3>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-lg-6">
            <div class="input-group">
            <input id="key" type="text" class="form-control">
            <span class="input-group-btn">
                <button id = "go" class="btn btn-default" type="button">
                    Go!
                </button>
            </span>
            </div>
        </div>
    </div>

    <hr style="height:10px;border:none;border-top:10px groove skyblue;">

    <div class="row">
        <div class="col-sm-6 col-md-6">
            <img id="img" src=""
                 alt="通用的占位符缩略图">
        </div>
    </div>
</div>

<script type="text/javascript">

    $(function () {
       $("#go").click(function () {
           var url = "/api/twodimensioncode?key=" + $("#key").val();
           $.get(url ,function(data,status){
               if (status === "success") {
                    $("#img").attr("src", "data:image/png;base64,"+data.base64)
               } else {
                   console.log("创建失败");
               }
           });
       });
    });

</script>

{% include 'include/footer.twig.html' %}